<template>
  <div>
    <el-container>
      <el-aside width="260px">
        <el-card class="header-aside">
          <el-autocomplete
            class="header-aside-serach"
            v-model="friendNo"
            value-key="userId"
            :fetch-suggestions="queryUser"
            placeholder="请输入账号"
            @select="handleSelect"
            size="mini"
          >
            <template slot-scope="{ item }">
              <el-row>
                <el-col :span="4">
                  <el-avatar
                    shape="square"
                    :size="24"
                    :src="item.head"
                  ></el-avatar>
                </el-col>
                <el-col :span="20">
                  <div class="search-name">{{ item.nick }}</div>
                </el-col>
              </el-row>
            </template>
          </el-autocomplete>
        </el-card>
        <div class="content-aside">
          <div class="content-aside-item">
            <div class="content-aside-label">新的朋友</div>
            <el-row class="content-aside-value">
              <el-col :span="4">
                <el-avatar
                  shape="square"
                  :size="36"
                  :src="newFriendImage"
                ></el-avatar>
              </el-col>
              <el-col :span="20">
                <div class="item-name">新的朋友</div>
              </el-col>
            </el-row>
            <el-divider />
          </div>

          <!-- 循环展示 -->
          <div class="content-aside-item" v-for="key in initials" :key="key">
            <div class="content-aside-label">{{ key }}</div>
            <div
              class="content-aside-value"
              v-for="item in datas[key]"
              :key="item.id"
              @click="router('friendUser', { userId: item.friendUserId })"
            >
              <el-row>
                <el-col :span="4">
                  <el-avatar
                    shape="square"
                    :size="36"
                    :src="item.friendHead"
                  ></el-avatar>
                </el-col>
                <el-col :span="20">
                  <div class="item-name">{{ item.friendMemo }}</div>
                </el-col>
              </el-row>
            </div>
            <el-divider />
          </div>
        </div>
      </el-aside>
      <!-- 选中后主内容 -->
      <el-main>
        <el-card class="box-card" body-style="padding:0">
          <div class="main-content">
            <el-empty v-if="!select" description="无聊天"></el-empty>
            <router-view />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import newFriendImage from "@/assets/new_friend.jpg";
import { UserFriend, User } from "@/api/api.js";
import { pinyin } from "pinyin-pro";
export default {
  data() {
    return {
      friendNo: "",
      select: false,
      newFriendImage: newFriendImage,
      initials: [],
      datas: {},
    };
  },
  created() {
    this.onLoad();
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    $route(to, from) {
      this.onLoad();
    },
  },
  methods: {
    onLoad() {
      UserFriend.list().then((res) => {
        this.initials = new Set();
        this.datas = {};
        res.forEach((element) => {
          let initial = pinyin(element.friendMemo, {
            pattern: "first",
            type: "array",
          })[0].toUpperCase();
          this.initials.add(initial);
          if (!this.datas[initial]) {
            this.datas[initial] = [];
          }
          this.datas[initial].push(element);
        });
      });
    },
    queryUser(queryString, cb) {
      if (this.$_.isEmpty(queryString)) {
        cb([]);
        return;
      }
      User.list({
        query: {
          LIKE_userId: queryString,
        },
      }).then((res) => {
        cb(res);
      });
    },
    handleSelect(item) {
      this.router("friendUser", { userId: item.userId });
    },
    router(path, query) {
      this.$router
        .push({ path: path, query: query })
        .then(() => (this.select = true));
    },
  },
};
</script>

<style lang="less">
.el-card__body {
  padding: 10px;
}
.el-divider--horizontal {
  margin: 5px 0;
}
.el-main {
  padding: 0;
}
</style>
<style lang="less" scoped>
.header-aside {
  height: 50px;
  background-color: #fff;
  border-right: 1px solid #ebeef5;
  text-align: center;
}
.search-name {
  padding-left: 5px;
}
.content-aside {
  height: 568px;
  overflow: auto;
  background-color: #ebeef59e;
  border-right: 1px solid #ebeef5;
}
.content-aside-item {
  margin: 5px 0;
  padding-left: 5px;
}
.content-aside-label {
  font-size: 12px;
  color: #909399ab;
  margin: 10px 0;
}
.content-aside-value {
  padding: 10px 0;
}
.content-aside-value:hover {
  background-color: #e0e2e6;
}
.item-name {
  font-size: 14px;
  padding-left: 2px;
  padding-top: 10px;
}
.main-content {
  height: 618px;
  background-color: #ebeef59e;
}
</style>